<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="收入类型">
                <el-select v-model="formInline.region1" placeholder="收入类型">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="收入" value="dfk"></el-option>
                    <el-option label="支出" value="yzf"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="block">
                    <el-date-picker
                            v-model="formInline.value2"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="formInline.pickerOptions">
                    </el-date-picker>
                </div>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div>

        </div>
        <el-table
                :data="tableData"
                style="width: 100%">

            <el-table-column
                    prop="xh"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="sj"
                    label="消费时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="dh"
                    label="任务ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="fkje"
                    label="收支类型"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="czfs"
                    label="收支明细"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="llb"
                    label="流量币"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="czzt"
                    label="账户剩余流量币"
            >
            </el-table-column>
        </el-table>
    </div>

</template>
<script>
  export default {
    name: 'czjl',
    data() {
      return {
        formInline: {
          user: '',
          region: '',
          region1: '',
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }]
          },

          value2: ''

        },
        tableData: [{
          xh: '1',
          sj: '2020-03-22 18:37:15',
          dh: ' 1241675297885347841',
          fkje: '支出',
          czfs: '发布淘宝app流量任务',
          llb: '-150',
          czzt: '1097954'

        }]

      }
    },

    methods: {
      onSubmit() {
        console.log('submit!')
      }
    }
  }
</script>
<style scoped>

</style>
